<template>
    <view class="chuBei">
<!--        <view v-if="need_wait">-->
<!--            <MNeedWait></MNeedWait>-->
<!--        </view>-->
        <view v-if="need_login_show">
            <m-login></m-login>
        </view>
        <view class="chubei_box">
            <view>
                <button class="chubei_button_1" @tap="goNext('chuBeiRule')">规则</button>
            </view>
            <view>
                <button class="chubei_button_2" @tap="goNext('chuBeiRank')">排行榜</button>
            </view>
        </view>
        <view class="money_1"></view>
        <view class="money_2"></view>
        <view class="money_3"></view>
        <view class="chubei_money_box">
            <view class="money_show">
                ￥{{show_money}}
            </view>
        </view>
    </view>
</template>

<script>
    import MnoData from '@/components/m-noData.vue'
    import MLogin from '@/components/m-login.vue'
    import MNeedWait from '@/components/m-needWait.vue'
    export default {
        name: 'chuBei',
        data() {
            return {
                need_login_show:false,
                need_wait:true,
                show_money:''
            }
        },
        onShow(){
            // this.need_wait=true
            // return
            if(this.$store.state.token!==''){
                this.need_login_show=false
            }else{
                this.need_login_show=true
                return
            }
            this.getTotalTickets()
            // setInterval(() => {
            //     this.getTotalTickets()
            // }, 2000)

        },
        mounted(){
            // this.getTotalTickets()
        },
        //页面触底钩子
        onReachBottom() {
        },
        methods: {
            goNext(res){
                uni.navigateTo({
                    url:'/pages/home/'+res
                })
            },
            async getTotalTickets(){
                let resData =await this.$apis.getTotalTickets({access_token:''})
                if(resData.code===0){
                    this.show_money=resData.data.show_money
                }
            }
        },
        components:{
            MnoData,
            MLogin,
            MNeedWait
        }

    }
</script>
<style>
    page {
        /*background-image: url("https://qiniu.scxhrd.com/static/img/star_bak.png");*/
        background-size: 100% 100%;
    }
</style>
<style lang="less" scoped>
    .chubei_box{
        display: flex;
        flex-direction: row;
        justify-content: left;
    }
    .chubei_button_1{
        text-align: center;
        font-size: 26rpx;
        color: #ffffff;
        background-image: linear-gradient(#FFB422, #FA8028);
        padding: 0 !important;
        padding-top: 5rpx !important;
        line-height: 2;
        height: 60rpx;
        width: 120rpx;
        margin-top: 10rpx;
        margin-left: 20rpx;
    }
    .chubei_button_2{
        text-align: center;
        font-size: 26rpx;
        color: #ffffff;
        background-image: linear-gradient(#FFB422, #FA8028);
        padding: 0 !important;
        padding-top: 5rpx !important;
        margin-left: 20rpx;
        line-height: 2;
        height: 60rpx;
        width: 120rpx;
        margin-top: 10rpx;
    }
    .chubei_money_box{
        width:450rpx;
        height: 450rpx;
        background-image: url("https://qiniu.scxhrd.com/static/img/chubei_count.png");
        background-size: 100% 100%;
        transform: translate(40%,80%);
        text-align: center;
    }
    .money_show{
        font-size: 36rpx;
        color: #FA7E29;
        position: relative;
        left: -25rpx;
        top: 315rpx;
    }
    .money_1{
        height: 105rpx;
        width: 105rpx;
        background-image: url("https://qiniu.scxhrd.com/static/img/chubei_money.png");
        background-size: 100% 100%;
        position: absolute;
        top: 80rpx;
        left: 20rpx;
        z-index: 1;
        opacity: 0;
        /*top: 600rpx;*/
        /*left: 230rpx;*/
        /*animation-timing-function:2s;*/
        /*-webkit-animation-timing-function:2s;*/
        animation:money_1 2s linear 2s infinite normal;
        /* Firefox: */
        -moz-animation:money_1 2s linear 2s infinite normal;
        /* Safari and Chrome: */
        -webkit-animation:money_1 2s linear 2s infinite normal;
        /* Opera: */
        -o-animation:money_1 2s linear 2s infinite normal;
    }
    @keyframes money_1
    {
        0%   {top:80rpx; left:20rpx; height: 105rpx; width: 105rpx ; opacity:1;}
        50%  {top:300rpx; left:115rpx; height: 80rpx; width: 80rpx ; opacity:1;}
        90%  {top:500rpx; left:200rpx; height: 40rpx; width: 40rpx ; opacity:1;}
        100% {top:600rpx; left:230rpx; height: 30rpx; width: 30rpx ; opacity:0;}
    }

    @-moz-keyframes money_1 /* Firefox */
    {
        0%   {top:80rpx; left:20rpx; height: 105rpx; width: 105rpx ; opacity:1;}
        50%  {top:300rpx; left:115rpx; height: 80rpx; width: 80rpx ; opacity:1;}
        90%  {top:500rpx; left:200rpx; height: 40rpx; width: 40rpx ; opacity:1;}
        100% {top:600rpx; left:230rpx; height: 30rpx; width: 30rpx ; opacity:0;}
    }

    @-webkit-keyframes money_1 /* Safari and Chrome */
    {
        0%   {top:80rpx; left:20rpx; height: 105rpx; width: 105rpx ; opacity:1;}
        50%  {top:300rpx; left:115rpx; height: 80rpx; width: 80rpx ; opacity:1;}
        90%  {top:500rpx; left:200rpx; height: 40rpx; width: 40rpx ; opacity:1;}
        100% {top:600rpx; left:230rpx; height: 30rpx; width: 30rpx ; opacity:0;}
    }

    @-o-keyframes money_1 /* Opera */
    {
        0%   {top:80rpx; left:20rpx; height: 105rpx; width: 105rpx ; opacity:1;}
        50%  {top:300rpx; left:115rpx; height: 80rpx; width: 80rpx ; opacity:1;}
        90%  {top:500rpx; left:200rpx; height: 40rpx; width: 40rpx ; opacity:1;}
        100% {top:600rpx; left:230rpx; height: 30rpx; width: 30rpx ; opacity:0;}
    }
    .money_2{
        height: 105rpx;
        width: 105rpx;
        background-image: url("https://qiniu.scxhrd.com/static/img/chubei_money.png");
        background-size: 100% 100%;
        position: absolute;
        top: 40rpx;
        left: 350rpx;
        z-index: 1;
        opacity: 0;
        /*top: 600rpx;*/
        /*left: 230rpx;*/
        /*animation-timing-function:2s;*/
        /*-webkit-animation-timing-function:2s;*/
        animation:money_2 2.4s linear 2.4s infinite normal;
        /* Firefox: */
        -moz-animation:money_2 2.4s linear 2.4s infinite normal;
        /* Safari and Chrome: */
        -webkit-animation:money_2 2.4s linear 2.4s infinite normal;
        /* Opera: */
        -o-animation:money_2 2.4s linear 2.4s infinite normal;
    }
    @keyframes money_2
    {
        0%   {top:40rpx; left:350rpx; height: 105rpx; width: 105rpx ; opacity:1;}
        50%  {top:300rpx; left:350rpx; height: 80rpx; width: 80rpx ; opacity:1;}
        90%  {top:500rpx; left:350rpx; height: 40rpx; width: 40rpx ; opacity:1;}
        100% {top:600rpx; left:350rpx; height: 30rpx; width: 30rpx ; opacity:0;}
    }

    @-moz-keyframes money_2 /* Firefox */
    {
        0%   {top:40rpx; left:350rpx; height: 105rpx; width: 105rpx ; opacity:1;}
        50%  {top:300rpx; left:350rpx; height: 80rpx; width: 80rpx ; opacity:1;}
        90%  {top:500rpx; left:350rpx; height: 40rpx; width: 40rpx ; opacity:1;}
        100% {top:600rpx; left:350rpx; height: 30rpx; width: 30rpx ; opacity:0;}
    }

    @-webkit-keyframes money_2 /* Safari and Chrome */
    {
        0%   {top:40rpx; left:350rpx; height: 105rpx; width: 105rpx ; opacity:1;}
        50%  {top:300rpx; left:350rpx; height: 80rpx; width: 80rpx ; opacity:1;}
        90%  {top:500rpx; left:350rpx; height: 40rpx; width: 40rpx ; opacity:1;}
        100% {top:600rpx; left:350rpx; height: 30rpx; width: 30rpx ; opacity:0;}
    }

    @-o-keyframes money_2 /* Opera */
    {
        0%   {top:40rpx; left:350rpx; height: 105rpx; width: 105rpx ; opacity:1;}
        50%  {top:300rpx; left:350rpx; height: 80rpx; width: 80rpx ; opacity:1;}
        90%  {top:500rpx; left:350rpx; height: 40rpx; width: 40rpx ; opacity:1;}
        100% {top:600rpx; left:350rpx; height: 30rpx; width: 30rpx ; opacity:0;}
    }

    .money_3{
        height: 105rpx;
        width: 105rpx;
        background-image: url("https://qiniu.scxhrd.com/static/img/chubei_money.png");
        background-size: 100% 100%;
        position: absolute;
        top: 20rpx;
        left: 500rpx;
        z-index: 1;
        opacity: 0;
        /*top: 600rpx;*/
        /*left: 230rpx;*/
        /*animation-timing-function:2s;*/
        /*-webkit-animation-timing-function:2s;*/
        animation:money_3 2.8s linear 2.8s infinite normal;
        /* Firefox: */
        -moz-animation:money_3 2.8s linear 2.8s infinite normal;
        /* Safari and Chrome: */
        -webkit-animation:money_3 2.8s linear 2.8s infinite normal;
        /* Opera: */
        -o-animation:money_3 2.8s linear 2.8s infinite normal;
    }
    @keyframes money_3
    {
        0%   {top:20rpx; left:500rpx; height: 105rpx; width: 105rpx ; opacity:1;}
        50%  {top:300rpx; left:500rpx; height: 80rpx; width: 80rpx ; opacity:1;}
        90%  {top:500rpx; left:500rpx; height: 40rpx; width: 40rpx ; opacity:1;}
        100% {top:600rpx; left:500rpx; height: 30rpx; width: 30rpx ; opacity:0;}
    }

    @-moz-keyframes money_3 /* Firefox */
    {
        0%   {top:20rpx; left:500rpx; height: 105rpx; width: 105rpx ; opacity:1;}
        50%  {top:300rpx; left:500rpx; height: 80rpx; width: 80rpx ; opacity:1;}
        90%  {top:500rpx; left:500rpx; height: 40rpx; width: 40rpx ; opacity:1;}
        100% {top:600rpx; left:500rpx; height: 30rpx; width: 30rpx ; opacity:0;}
    }

    @-webkit-keyframes money_3 /* Safari and Chrome */
    {
        0%   {top:20rpx; left:500rpx; height: 105rpx; width: 105rpx ; opacity:1;}
        50%  {top:300rpx; left:500rpx; height: 80rpx; width: 80rpx ; opacity:1;}
        90%  {top:500rpx; left:500rpx; height: 40rpx; width: 40rpx ; opacity:1;}
        100% {top:600rpx; left:500rpx; height: 30rpx; width: 30rpx ; opacity:0;}
    }

    @-o-keyframes money_3 /* Opera */
    {
        0%   {top:20rpx; left:500rpx; height: 105rpx; width: 105rpx ; opacity:1;}
        50%  {top:300rpx; left:500rpx; height: 80rpx; width: 80rpx ; opacity:1;}
        90%  {top:500rpx; left:500rpx; height: 40rpx; width: 40rpx ; opacity:1;}
        100% {top:600rpx; left:500rpx; height: 30rpx; width: 30rpx ; opacity:0;}
    }
</style>
